<template>
  <div class="container">
    <h1>学员信息统计</h1>
    
    <!-- 统计卡片区域 -->
    <div class="stat-cards">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">15</div>
          <div class="stat-label">学员总人数</div>
        </div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">3</div>
          <div class="stat-label">班级数量</div>
        </div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">3</div>
          <div class="stat-label">违纪学员</div>
        </div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">9</div>
          <div class="stat-label">本科及以上</div>
        </div>
      </el-card>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-area">
      <!-- 按班级统计 -->
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>按班级统计</span>
          </div>
        </template>
        <div class="chart-container">
          <div class="chart-placeholder">
            <!-- 这里将放置班级统计图表 -->
            <el-empty description="班级统计图表区域" />
          </div>
        </div>
      </el-card>
      
      <!-- 按学历统计 -->
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>按学历统计</span>
          </div>
        </template>
        <div class="chart-container">
          <div class="chart-placeholder">
            <!-- 这里将放置学历统计图表 -->
            <el-empty description="学历统计图表区域" />
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 违纪情况统计 -->
    <div class="violation-area">
      <el-card class="violation-card">
        <template #header>
          <div class="card-header">
            <span>违纪情况统计</span>
          </div>
        </template>
        <div class="violation-content">
          <div class="violation-placeholder">
            <!-- 这里将放置违纪统计图表 -->
            <el-empty description="违纪统计图表区域" />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  ElCard,
  ElEmpty
} from 'element-plus'

// 这里可以添加图表相关的数据和配置
</script>

<style scoped>
.container {
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
  color: #333;
}

/* 统计卡片样式 */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-content {
  text-align: center;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

/* 图表区域样式 */
.charts-area {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  height: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: calc(100% - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 违纪统计样式 */
.violation-area {
  margin-bottom: 20px;
}

.violation-card {
  height: 300px;
}

.violation-content {
  height: calc(100% - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.violation-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>